<template>
  <div id="App">
    <!-- <base-1-vue @res="res">


      <div v-for="(item, index) in list" :key="item.id">
        {{ index + 1 }}
        {{ item.title }}
        <button @click="del(item.id)">删除</button>
      </div>
    </base-1-vue>

    <b-2>
      <template v-slot:head>
        <div>友情提醒</div>
      </template>
      <template #main>
        <div>这是内容哦那个</div>
      </template>
      <template #bottom>
        <div>
          这是底部
        </div>
      </template>
    </b-2>
    <b-2>
      <template v-slot:head>
        <div>{{ title }}</div>
      </template>
   
    </b-2> -->
    <vue-04 :data="list">
      <template v-slot:caozuo="{item}">
        <div>
          <button @click="del(item.id)" class="btn">删除</button>
        </div>
      </template>
    </vue-04>
     <vue-04 :data="list">
      <template v-slot:caozuo="obj">
        <div>
          <button @click="check(obj)" class="btn">查看</button>
        </div>
      </template>
    </vue-04>
  </div>
</template>
<script >
import vue04 from "../components/03/04作用域插槽.vue";
import B2 from "../components/03/b2.vue";
import Base1Vue from "../components/03/Base1.vue";
export default {
  name: "app",
  data() {
    return {
      list: [
        { id: 1, title: "波音797起飞" },
        { id: 2, title: "波音796起飞" },
        { id: 3, title: "波音794起飞" },
        { id: 4, title: "波音792起飞" },
        { id: 5, title: "波音791起飞" },
      ],
    };
  },
  props: [],
  components: {
    Base1Vue,
    B2,
    vue04,
  },
  created() {},
  mounted() {},
  methods: {
    del(id) {
      this.list = this.list.filter((item) => item.id != id);
    },
    res(value) {
      this.list = value;
    },
    check(item){
      console.log(item);
      alert(`${item.data.title}${item.data.id} ${item.msg}`);
    }
  },
};
</script>
<style lang='less' scoped>
ul li {
  list-style: none;
  margin-top: 5px;
  padding-bottom: 10px;
  border-bottom: 1px solid #000;
}
.btn {
  outline-style: none;
  border: none;
  background-color: #e86161;
  color: #fff;
  padding: 4px 10px;
  border-radius: 3px;
}
</style>